<!DOCTYPE html>
<html lang="en">
<!-- 209001115马人和 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mitt实现组件通信</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
</head>
<style>
    .father{
        width: 500px;
        height: 520px;
        border: 1px solid black;
    }
    .son1{
        width: 400px;
        height: 200px;
        border: 1px solid black;
    }
    .son2{
        width: 400px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<body>
    <div id="app"></div>
    <template id="root">
        <div class="father">
            <p>建立一个父组件两个子组件，在父组件当中创建button按钮，点击时传递信息给子组件；在myson1组件当中创建button给父组件传递信息；在myson2组件当中创建button给非父组件传递信息</p>
            {{SonSendMsg}}
            <button @click="sendToSon">给子组件传递数据</button>
            <my-son1></my-son1>
            <my-son2></my-son2>
        </div>
    </template>
    <template id="myson1">
        <div class="son1">
            {{FatherSendMsg}}
            <br>
            {{BrotherSendMsg}}
            <button @click="sendToFather">给父组件传递数据</button>
        </div>
    </template>
    <template id="myson2">
        <div class="son2">
            {{FatherSendMsg}}
            <button @click="sendToBrother">给非父子组件传递数据</button>
        </div>
    </template>
</body>
<script>
    const emitter = window.mitt();
    const app = Vue.createApp({
        template: "#root",
        data() {
            return {
                sendToSonMsg: 'Send To My Son Message',
                SonSendMsg: ''
            }
        },
        methods:{
            sendToSon() {
                emitter.emit('MySon', this.sendToSonMsg);
            }
        },
        mounted() {
            //获取子组件传递的信息
            emitter.on('MyFather', (v) => {
                this.SonSendMsg = v;
                console.log(v);
            })
        }
    })
    app.component('MySon1', {
        template: '#myson1',
        data() {
            return {
                sendToFatherMsg: 'Send To My Father Message',
                FatherSendMsg:'',
                BrotherSendMsg:''
            }
        },
        mounted() {
            emitter.on('MySon', (v) => {
                this.FatherSendMsg = v;
                console.log(v);
            })
            emitter.on('MyBrother', (v) => {
                this.BrotherSendMsg = v;
                console.log(v);
            })
        },
        methods: {
            sendToFather() {
                emitter.emit('MyFather', this.sendToFatherMsg);
            }
        },

    })
    app.component('MySon2', {
        template: '#myson2',
        data() {
            return {
                sendToBrotherMsg: 'Send To My Brother Message',
                FatherSendMsg:'',
            }
        },
        methods: {
            sendToBrother() {
                emitter.emit('MyBrother', this.sendToBrotherMsg);
            }
        },
        mounted() {
            emitter.on('MySon', (v) => {
                this.FatherSendMsg = v;
                console.log(v);
            })
        },
    })
    app.mount("#app")
</script>

</html>